<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>TreeView</title>
<script>
function gid(id){return document.getElementById(id);}
function TreeNodeClick(obj)
{
	var strDisplay=obj.src.indexOf("Collapse.gif")>0 ? "none":"";
	var children=gid(obj.id.replace("img_","")).getAttributeNode("childids").nodeValue;
	if (children=="") return;
	var arr=children.split(",");
	for(var i=0,j=arr.length;i<j;i++)
	{
		gid(arr[i]).style.display=strDisplay;
		ExpandTreeNode(gid(arr[i]),strDisplay);
	}
	if (strDisplay=="none")
		obj.src=obj.src.replace("Collapse.gif","Expand.gif");
	else
		obj.src=obj.src.replace("Expand.gif","Collapse.gif");
}
function ExpandTreeNode(obj,mode)
{
	if(obj==null) return;
	var img=gid("img_"+obj.id)
	if(img==null) return;
	var strDisplay=img.src.indexOf("Collapse.gif")>0 ? "":"none";
	if (strDisplay=="none" && mode=="") return;
	var objchildren=gid(obj.id.replace("img_",""));
	if(objchildren==null) return;
	var children=objchildren.getAttributeNode("childids").nodeValue;
	if (children=="") return;
	var arr=children.split(",");
	for(var i=0,j=arr.length;i<j;i++)
	{
		gid(arr[i]).style.display=mode;
		ExpandTreeNode(gid(arr[i]),mode);
	}
}
</script>
</head>
<body>
<table width="500" border="0" cellpadding="0" cellspacing="1" bgcolor="#999999">
  <tr id="0" depth="0" childids="1,2,6" bgcolor="#FFFFFF">
    <td width="210" height="30"><span style="padding-left:0px;"></span><img id="img_0" onClick="TreeNodeClick(this);" src="Collapse.gif">Root    </td>
    <td width="75">id=0</td>
    <td width="68">depth=0</td>
    <td width="147">childid=1,2,6</td>
  </tr>
  <tr id="1" depth="1" childids="" bgcolor="#FFFFFF">
    <td height="30">
	<span style="padding-left:10px;"></span>
	<span style="height:100%; width:1px; background-image:url(TreeViewList_Vertical.gif)"></span>
	<span style="padding-left:20px;"></span>
	&nbsp;1
	</td>
    <td>1</td>
    <td>1</td>
    <td>&nbsp;</td>
  </tr>
  <tr id="2" depth="1" childids="3" bgcolor="#FFFFFF">
    <td height="30"><span style="padding-left:20px;"></span>&nbsp;<img id="img_2" onClick="TreeNodeClick(this);" src="Collapse.gif">2</td>
    <td>2</td>
    <td>1</td>
    <td>3</td>
  </tr>
  <tr id="3" depth="2" childids="4,5" bgcolor="#FFFFFF">
    <td height="30"><span style="padding-left:40px;"></span>&nbsp;<img id="img_3" onClick="TreeNodeClick(this);" src="Collapse.gif">21</td>
    <td>3</td>
    <td>2</td>
    <td>4,5</td>
  </tr>
  <tr id="4" depth="3" childids="" bgcolor="#FFFFFF">
    <td height="30"><span style="padding-left:80px;"></span>&nbsp;211</td>
    <td>4</td>
    <td>3</td>
    <td>&nbsp;</td>
  </tr>
  <tr id="5" depth="3" childids="" bgcolor="#FFFFFF">
    <td height="30"><span style="padding-left:80px;"></span>&nbsp;212</td>
    <td>5</td>
    <td>3</td>
    <td>&nbsp;</td>
  </tr>
  <tr id="6" depth="1" childids="7" bgcolor="#FFFFFF">
    <td height="30"><span style="padding-left:20px;"></span>&nbsp;<img id="img_6" onClick="TreeNodeClick(this);" src="Collapse.gif" >3</td>
    <td>6</td>
    <td>1</td>
    <td>7</td>
  </tr>
  <tr id="7" depth="2" childids="" bgcolor="#FFFFFF">
    <td height="30"><span style="padding-left:60px;"></span>&nbsp;31</td>
    <td>7</td>
    <td>2</td>
    <td>&nbsp;</td>
  </tr>
  <tr id="8" depth="0" childids="" bgcolor="#FFFFFF">
    <td height="30">
	<span style="padding-left:10px;"></span>
	<span style="height:50%; vertical-align:top; width:1px; background-image:url(TreeViewList_Vertical.gif)"></span>
	<span style="width:10px; height:100%; vertical-align:top; background-repeat:repeat-x; background-position:; background-image:url(TreeViewList_Horizontal.gif)"></span>
	8</td>
    <td>8</td>
    <td>0</td>
    <td>&nbsp;</td>
  </tr>
</table>
<br />
<table width="300" height="100" border="0" cellpadding="0" cellspacing="1" bgcolor="#666666">
  <tr>
    <td bgcolor="#FFFFFF">&nbsp;</td>
    <td bgcolor="#FFFFFF">&nbsp;</td>
    <td bgcolor="#FFFFFF">&nbsp;</td>
    <td bgcolor="#FFFFFF">&nbsp;</td>
  </tr>
  <tr>
    <td height="20" bgcolor="#FFFFFF">
	<table height="100%" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td style="height:50%; background-position:center; background-repeat:repeat-y;background-image:url(TreeViewList_Vertical.gif)"></td>
        <td></td>
		<td rowspan="3">bbbb</td>
      </tr>
      <tr height="9px">
        <td><img src="ExpandSmall.gif" onClick="TreeNodeClick(this);" height="9px" width="9px" style="cursor:pointer;"></td>
        <td style="width:7px; vertical-align:middle; background-repeat:repeat-x; background-position:center; background-image:url(TreeViewList_Horizontal.gif)"></td>
      </tr>
      <tr>
        <td style="height:50%; background-position:center; background-repeat:repeat-y;background-image:url(TreeViewList_Vertical.gif)"></td>
        <td></td>
      </tr>
    </table>	</td>
    <td height="20" bgcolor="#FFFFFF">	
	<table height="100%" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td style="height:50%; background-position:right; background-repeat:repeat-y;background-image:url(TreeViewList_Vertical.gif)"></td>
        <td></td>
        </tr>
      <tr height="9px">
        <td style="width:5px; background-position:right top; background-repeat:no-repeat;background-image:url(TreeViewList_Vertical.gif)"></td>
        <td style="width:11px; vertical-align:middle; background-repeat:repeat-x; background-position:center; background-image:url(TreeViewList_Horizontal.gif)"></td>
        </tr>
      <tr>
        <td style="height:50%; background-position:right; background-repeat:repeat-y;background-image:url(TreeViewList_Vertical.gif)"></td>
        <td></td>
        </tr>
    </table>	</td>
    <td height="100" bgcolor="#FFFFFF"><table height="100%" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td style="height:50%; background-position:right; background-repeat:repeat-y;background-image:url(TreeViewList_Vertical.gif)"></td>
        <td></td>
		<td rowspan="2" valign="bottom"><img src="knowledge.gif" width="40" height="40"></td>
      </tr>
      <tr height="9px">
        <td style="width:5px; background-position:right top; background-repeat:no-repeat;background-image:url(TreeViewList_Vertical.gif)"></td>
        <td style="width:11px; vertical-align:middle; background-repeat:repeat-x; background-position:center; background-image:url(TreeViewList_Horizontal.gif)"></td>
      </tr>
      <tr>
        <td style="height:50%; background-position:right; background-repeat:repeat-y;background-image:url(TreeViewList_Vertical.gif)"></td>
        <td></td>
		<td style="height:50%;padding-left:4px;"><span style="height:100%; width:1px; background-position:left; background-repeat:repeat-y;background-image:url(TreeViewList_Vertical.gif)"></span></td>
      </tr>
    </table></td>
    <td bgcolor="#FFFFFF">&nbsp;</td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF" style="padding-left:10px"><div style="position:absolute; width:20px; left:10px;">a</div>bbb&nbsp;</td>
    <td bgcolor="#FFFFFF">&nbsp;</td>
    <td bgcolor="#FFFFFF">&nbsp;</td>
    <td bgcolor="#FFFFFF">&nbsp;</td>
  </tr>
</table>
<p>&nbsp;</p>

<p>&nbsp;</p>
<p>&nbsp;</p>
<!--style="height:30%; background-position:right; background-repeat:repeat-y;background-image:url(TreeViewList_Vertical.gif)"-->
</body>
</html>
